<template>
    <div
        class="menus-box"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div class="tabs">
            <el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="tabClick">
                <el-tab-pane
                    :label="item.appName"
                    v-for="(item,index) in leftMenuList"
                    :key="item.id"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div class="mod-meun" v-if="appId=='lhzd'">
            <el-row>
                <el-col :span="16">
                    <h2 class="app-title">功能池分类</h2>
                    <el-tree
                        :data="dataList"
                        show-checkbox
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :expand-on-click-node="false"
                        :render-content="renderContent"
                        :props="defaultProps"
                    ></el-tree>
                </el-col>
                <el-col :span="8">
                    <el-table border :data="domainResourcesList" style="width: 100%;">
                        <el-table-column label="作用域" align="center" prop="name"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <div class="footer">
                <el-button @click="$router.go(-1)">返回上一页</el-button>
                <el-button type="primary" @click="addSubmit('ruleForm')" :loading="loading">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
export default {
    data() {
        return {
            tabPosition: 'left',
            dataForm: {},
            dataList: [],
            loading: false,
            addOrUpdateVisible: false,
            leftMenuList: [],
            appId: '',
            roleId: '',
            domainResourcesList: [],
            selectData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            dealResutData: [],
            getNode:[]
        };
    },
    mounted() {
        this.roleId = this.$route.query.roleId;
        this.appId = this.$route.query.appId;
        this.getLeftMenus();
    },
    methods: {
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node-app">
                    <span on-click={() => this.showBtnScope(data)}>{node.label}</span>
                </span>
            );
        },
        getLeftMenus() {
            var params = {
                pageNum: 1,
                pageSize: 1000
            };
            this.loading = true;
            API.systemManger.systemList(params).then(res => {
                this.leftMenuList = res.data.rows;
                this.appId = res.data.rows[0].appId;
                this.loading = false;
                this.getList();
            });
        },

        tabClick(tab, event) {
            this.appId = this.leftMenuList[tab.index]['appId'];
        },
        // 显示作用域
        showBtnScope(row) {
            console.log(row);
            if (row.domainResources) {
                this.domainResourcesList = row.domainResources;
            } else {
                this.domainResourcesList = [];
            }
        },
        // 保存
        addSubmit() {
              var result = this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())
             this.dataDeal(result);
            var list = this.dealResutData;
            var pageResources = []
            if (list.length > 0) {
                var child = list[0].children;
                if (child.length > 0) {
                    for (var k in child) {
                        if (child[k].roleSelect && child[k].type !== 'btn') {
                            pageResources.push({
                               functionResources: [],
                                pageId: child[k].id
                            });
                        }
                    }
                    for (var k in child) {
                        var child2 = child[k].children;
                        if (child2 && child2.length > 0) {
                            for (var y in child2) {
                                if (child2[y].roleSelect && child2[y].type == 'btn') {
                                    var domainResources = child2[y].domainResources;

                                   pageResources[k].functionResources.push({
                                        domainResources: [],
                                        functionId: child2[y].id
                                    });
                                    if (domainResources && domainResources.length > 0) {
                                        for (var x in domainResources) {
                                          
                                           pageResources[k].functionResources[y].domainResources.push({
                                                domainId: domainResources[x].id
                                            });
                                        }
                                    }

                                    var child3 = child2[y].children;
                                    if (child3 && child3.length > 0) {
                                        for (var c in child3) {
                                          pageResources[k].functionResources.push({
                                                domainResources: [],
                                                functionId: child3[c].id
                                            });
                                        }
                                        var dmx = child3.domainResources;
                                        if (dmx && dmx.length > 0) {
                                            for (var u in dmx) {
                                                  console.log(pageResources[k])
                                              pageResources[k].functionResources[y].domainResources.push({
                                                    domainId: dmx[u].id
                                                });
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            
                var data = {
                    pageResources:pageResources,appId:this.appId,
                    roleId: this.roleId
                };
                this.loading = true
                console.log(this.loading)
               
                API.role.saveAppPowerRole(data).then(res => {
                     console.log(this.loading)
                     this.loading = false
                    if (res.code == '20000000') {
                        this.$message({
                            type: 'success',
                            message: '保存成功'
                        });
                    } else {
                        this.$message.error(res.message);
                    }
                });
            } else {
                this.$message.error('请先勾选');
            }
        },
        dataEach(child, val) {
            for (var x in child) {
               
                if (val.indexOf(child[x].id)>-1) {
   
                    child[x].roleSelect = true
                }
                 else {
                     child[x].roleSelect = false
                }
                if (child[x].children && child[x].children.length > 0) {
                    this.dataEach(child[x].children, val);
                }
            }
        },
        dataDeal(val) {
            console.log(val)
            var data = cloneDeep(this.dataList);
           
            if (val.length > 0) {
        
                    for (var y in data) {
                        if (val.indexOf(data[y].id)>-1) {
                            data[y].roleSelect = true;
                            console.log(y)
                            console.log('相等')
                            console.log(data[y])
                        } 
                        if (data[y].children && data[y].children.length > 0) {
                            this.dataEach(data[y].children, val);
                        }
                    }
      this.dealResutData = data;
        
            }else {
  this.dealResutData = [];
            }          
           
            console.log('结果99999');
            console.log(data);
            console.log(this.dealResutData)
           
        },

        // 获取列表数据
        getList() {
            var data = {
                appId: this.appId,
                roleId: this.roleId
            };
            this.loading = true;
            API.role.appPowerRoleList(data).then(res => {
                this.loading = false;
               this.dataList = res.data.appResources;
               this.dataDeal1(res.data.appResources)
            });
        },
        dataEach1(child, val) {
            for (var x in child) {
                if (child[x].roleSelect) {
                   this.getNode.push(child[x].id)
                }
                if (child[x].children && child[x].children.length > 0) {
                    this.dataEach1(child[x].children);
                }
            }
        },
        dataDeal1(data) {
                    for (var y in data) {
                        if (data[y].roleSelect) {
                            data[y].roleSelect = true;
                            this.getNode.push(data[y].id)
                        }
                        
                        if (data[y].children && data[y].children.length > 0) {
                            this.dataEach1(data[y].children);
                        }
                    }
                
            this.$refs.tree.setCheckedKeys(this.getNode)
         
        }

    }
};
</script>
<style>
.custom-tree-node-app span {
    font-size: 14px;
}
.custom-tree-node-app:hover span {
    color: #409eff;
}
</style>
<style scoped>
.menus-box {
    background: #fff;
    padding: 20px;
    min-height: 100%;
}
.menus-box .tabs {
    float: left;
    width: 15%;
}
.menus-box .mod-meun {
    float: right;
    width: 83%;
}
.footer {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 100px;
}
.app-title {
    color: #909399;
    margin-bottom: 20px;
    font-size: 12px;
    background: rgba(235, 238, 245, 0.6);
    height: 38px;
    line-height: 38px;
    padding-left: 10px;
    padding-right: 10px;
}
</style>